import React from 'react';
import {Outlet} from 'react-router-dom';
import {Layout, Col, Row, theme} from 'antd';
import FileTree from "../file-tree";
import HeadContent from "../head";

const {Header, Content} = Layout;

const Home: React.FC = () => {
    const {
        token: {colorBgContainer},
    } = theme.useToken();
    return (
        <Layout>
            <Header>
                <div style={{color: "white"}}><HeadContent/></div>
            </Header>
            <Layout >
                <Row>
                    <Col span={6}>
                        <Layout>
                            <div style={{background: colorBgContainer,marginTop: 10}}>
                                <div style={{marginLeft: 20}}>
                                    <FileTree/>
                                </div>
                            </div>
                        </Layout>
                    </Col>
                    <Col span={18}>
                        <Layout>
                            <Content style={{
                                marginLeft: 24,
                                paddingTop:10,
                                minHeight: 750,
                                background: colorBgContainer
                            }}>
                                <Outlet/>
                            </Content>
                        </Layout>
                    </Col>
                </Row>
            </Layout>
        </Layout>
    );
};

export default Home
